import React, { HtmlHTMLAttributes, useEffect, useRef, useState } from 'react';
import { View, Text, StyleSheet, Animated, Dimensions, FlatList, SafeAreaView, StatusBar, TouchableOpacity } from 'react-native';
import AntDesign from 'react-native-vector-icons/AntDesign';

interface ICellProps<T> {
  title?: string;
  val?: string;
  leftChild?: React.ReactNode;
  rightChild?: React.ReactNode;
  isSlot: boolean;
  isBorder?:boolean
}

const Cell = <T extends unknown>({ title, val, leftChild, rightChild, isSlot,isBorder=true }: ICellProps<T>) => {
  return (
    <View style={{ alignItems: 'center' }}>
      <View style={styles.cellView}>
        <View style={{ flex: 0 }}>{!isSlot ? <Text style={styles.titleColor}>{title}</Text> : leftChild}</View>
        <View style={{ flex: 1, alignItems: 'flex-end' }}>{!isSlot ? <Text style={styles.valColor}>{val}</Text> : rightChild}</View>
      </View>
      {isBorder && <View style={styles.line}></View>}
    </View>
  );
};

const styles = StyleSheet.create({
  cellView: {
    paddingHorizontal: 12,
    marginVertical: 10,
    flexDirection: 'row',
    alignItems:'center',
  },
  titleColor: {
    color: '#000',
  },
  valColor: {
    color: '#969799',
  },
  line: {
    borderBottomWidth: 1,
    borderColor: '#eee',
    width: '90%',
    marginVertical: 4,
  },
});

export default Cell;
